<template>
  <div id="app">
    <header>
      <h1>2024待办事项</h1>
      <form id="new-task-form" @submit.prevent="handleAdd">
        <input type="text" v-model="task" id="new-task-input" placeholder="把计划写下来吧?" />
        <input type="submit" id="new-task-submit" value="添加任务" />
      </form>
    </header>
    <main>
      <section class="task-list">
        <h2>任务列表</h2>
        <div id="tasks">
          <template v-for="(item, index) in tasks" :key="index">
            <div class="task">
              <div class="content">
                <input
                  type="text"
                  class="text"
                  v-model="tasks[index]"
                  :disabled="readonly[index]"
                />
              </div>
              <div class="actions">
                <button class="edit" @click="handleEdit(index)">
                  {{ btnName[index] }}
                </button>
                <button class="delete" @click="handleDelete(index)">删除</button>
              </div>
            </div>
          </template>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [],
      task: '',
      btnName: [],
      readonly: [],
    }
  },
  methods: {
    handleAdd() {
      if (this.task.trim()) {
        this.tasks.push(this.task.trim())
        this.task = ''
        this.btnName.push('编辑')
        this.readonly.push(true)
      }
    },
    handleDelete(index) {
      this.tasks.splice(index, 1)
      this.btnName.splice(index, 1)
      this.readonly.splice(index, 1)
    },
  

    handleEdit(index) {
    const isEditing = this.readonly[index]; 
    this.readonly[index] = !isEditing; // 切换编辑状态
    this.btnName[index] = isEditing ? '保存' : '编辑'; // 更新按钮文本
  },

    
  },
}
</script>

<style>
:root {
  --dark: #374151;
  --darker: #1F2937;
  --darkest: #111827;
  --grey: #6B7280;
  --light: #EEE;
  --pink: #EC4899;
  --purple: #8B5Cf6;
}
* {
  box-sizing: border-box;
  margin: 0;
  font-family: 'Fira sans', sans-serif;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--dark);
  color: #fff;
}
header {
  padding: 2rem 1rem;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
header h1 {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--grey);
  margin-bottom: 1rem;
}
#new-task-form {
  display: flex;
}
input, button {
  appearance: none;
  border: none;
  outline: none;
  background: none;
}
#new-task-input {
  flex: 1 1 0%;
  background-color: var(--darker);
  padding: 1rem;
	border-radius: 1rem;
	margin-right: 1rem;
	color: var(--light);
  font-size: 1.25rem;  
}
#new-task-input::placeholder {
  color: var(--grey);
}
#new-task-submit {
  color: var(--pink);
  font-size: 1.25rem;  
  font-weight: 700;
  background-image: linear-gradient(to right, var(--pink), 
  var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
  transition: 0.4s;
}
#new-task-submit:hover {
  opacity: .8;
}
#new-task-submit:active {
  opacity: .6;
}
main {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  flex: 1 1 0%;
}
.task-list {
  padding: 1rem;
}
.task-list h2 {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--grey);
  margin-bottom: 1rem;
}
#tasks .task {
  display: flex;
  justify-content: space-between;
  background-color: var(--darkest) ;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 1rem;
}
.task .content {
  flex: 1 1 0%;
}
.task .content .text {
  color: var(--light);
  font-size: 1.125rem;
  width: 100%;
  display: block;
  transition: .4s;
}
.task .content .text:not(:read-only) {
  color: var(--pink);
}
.task .actions {
  display: flex;
  margin: 0 -.5rem;
} 
.task .actions button {
  cursor: pointer;
  margin: 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: .4s;
}
.task .actions button:hover {
  opacity: .8;
}
.task .actions button:active {
  opacity: .6;
}
.task .actions .edit {
  background-image: linear-gradient(to right, var(--pink), 
  var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.task .actions .delete {
  color: crimson;
}
</style>